<template>
    <!-- 任务详情抽屉-->
    <n-drawer v-model:show="active" :width="1200" :placement="'right'" :z-index="4">
        <n-drawer-content title="查看任务">
            <div class="box">
                <div class="name">
                    <div>
                        <span>项目名称 : </span>
                    </div>
                    <div>
                        <span>任务名称 : </span>
                    </div>
                    <div>
                        <span>任务内容 : </span>
                    </div>
                    <div>
                        <span>难易程度 : </span>
                    </div>
                    <div>
                        <span>数据源 : </span>
                    </div>
                    <div>
                        <span>评分方式 : </span>
                    </div>
                </div>
                <div class="main">
                    <div>
                        {{ taskInfo.project_name }}
                    </div>
                    <div>
                        {{ taskInfo.name }}
                    </div>
                    <div>
                        <p>任务描述 : </p>
                        <p style="white-space: pre-wrap">
                            <n-scrollbar style="max-height: 90px" trigger="none">
                            {{ taskInfo.describe }}
                            </n-scrollbar>
                        </p>
                        <br>
                        <p>提交任务类型 : </p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ rating_type[taskInfo.rating_type] }}</p>
                        <br>
                        <p v-show="taskInfo.rating_type ==='tp'">
                            <b>
                                <n-popover trigger="hover" placement="top-start">
                                    <template #trigger>
                                        任务图表评分权重:
                                    </template>
                                    可修改
                                </n-popover>
                            </b>
                            <span>
                    <n-popover>
                        <template #trigger>
                            <n-slider v-model:value="pictureWeight" :tooltip="false" :step="1"/>
                        </template>
                        {{ weightInfo }}
                    </n-popover>

                </span>
                        </p>
                        <p>文件下载 : </p>
                        <p v-show="taskInfo.rating_type !=='t'">
                            <b>&nbsp;&nbsp;&nbsp;&nbsp;图像文件: </b>
                            <span>
                    <a :href="taskInfo.picture_file" target="_blank">
                        {{ fileName(taskInfo.picture_file) }}
                    </a>
                </span>
                        </p>
                        <p v-show="taskInfo.rating_type !=='p'">
                            <b>&nbsp;&nbsp;&nbsp;&nbsp;表格文件: </b>
                            <span>
                    <a :href="taskInfo.table_file" target="_blank">
                        {{ fileName(taskInfo.table_file) }}
                    </a>
                </span>
                        </p>
                        <br>
                        <p>任务分析题 : </p>
                        <p @click="questionBankShowModal=true" class="pointer">&nbsp;&nbsp;&nbsp;&nbsp;已设置{{ taskInfo.task_questions_number }}题</p>
                        <br>
                        <p>学习资源: </p>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a :href="taskInfo.task_resources" target="_blank">
                        {{ taskInfo.task_resources }}
                    </a>
                </span>
                    </div>
                    <div>
                        {{ taskInfo.difficulty }}
                    </div>
                    <div>
                        <n-scrollbar style="max-height: 18vh" trigger="none">
                            <p v-for="(index,item) in taskInfo.data_source_name">{{ item + 1 + " . " + index }}</p>
                        </n-scrollbar>

                    </div>
                    <div>
                        <n-switch v-model:value="taskInfo.auto_scoring">
                            <template #checked>
                                自动评分
                            </template>
                            <template #unchecked>
                                手动评分
                            </template>
                        </n-switch>
                    </div>
                </div>
            </div>


        </n-drawer-content>
    </n-drawer>
    <n-modal v-model:show="questionBankShowModal">
        <n-card
            style="width: 600px"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
        >
            <n-scrollbar style="height: 60vh" trigger="none">
                <div class="questionBank" v-for="(index,item) in taskInfo.task_questions">
                    <p>
                        <span>{{ item + 1 }} : </span>
                        <span>{{ index.question }}</span>
                        <span style="font-size: 16px">  答案: {{ index.answer }}</span>
                    </p>
                    <p>
                        <span>A: </span>
                        <span>{{ index.A }}</span>
                    </p>
                    <p>
                        <span>B: </span>
                        <span>{{ index.B }}</span>
                    </p>
                    <p>
                        <span>C: </span>
                        <span>{{ index.C }}</span>
                    </p>
                    <p>
                        <span>D: </span>
                        <span>{{ index.D }}</span>
                    </p>
                </div>

            </n-scrollbar>
        </n-card>
    </n-modal>
</template>

<script setup>
// 任务详情抽屉
const active = ref(false)
// 任务信息
const taskInfo = ref({
    project_name: '',
    name: '',
    describe: '',
    rating_type: '',
    picture_weight: null,
    table_weight: null,
    picture_file: '',
    table_file: '',
    task_questions: null,
    task_questions_number: 0,
    task_resources: '',
    difficulty: '',
    auto_scoring: null,
})
// 目标类型对照表
const rating_type = {
    t: '表格',
    p: '图',
    tp: '图+表'
}
// 图片权重
const pictureWeight = ref(0)
// 监视图片权重
watch(pictureWeight, (count) => {
    taskInfo.value.picture_weight = count
    taskInfo.value.table_weight = 100 - count
})
// 权重信息
const weightInfo = computed(() => {
    return '图像权重:' + taskInfo.value.picture_weight + "% 表格权重:" + taskInfo.value.table_weight + '%'
})
// 文件名称
const fileName = (fileUrl) => {
    const fileUrlSplit = fileUrl.split('/')
    return fileUrlSplit[fileUrlSplit.length - 1]
}
const openViewTask = (value) => {
    console.log("@@",value)
    taskInfo.value = value
    pictureWeight.value = taskInfo.value.picture_weight
    active.value = true
    console.log(taskInfo.value)
}
// 查看题目
const questionBankShowModal = ref(false)
const questionBank = ref({

})

defineExpose({
    openViewTask
})
</script>

<style scoped lang="less">
.box {
    display: flex;
    height: 100%;

    .name, .main {
        display: flex;
        flex-direction: column;
        height: 100%;

        > div {
            padding: 10px;
        }

        > div:nth-child(-n+2) {
            flex: 1;
        }

        > div:nth-child(3) {
            flex: 6;
        }

        > div:nth-child(4) {
            flex: 1;
        }

        > div:nth-child(5) {
            flex: 3;
        }

        > div:nth-child(6) {
            flex: 1;
        }

    }

    .name {
        flex: 1;

        > div:nth-child(4), > div:nth-child(6) {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .main {
        flex: 7;

        > div:nth-child(n+3) {

            border: solid 1px #AAAAAA;
        }

        > div:nth-child(n+4) {
            border-top: none;
        }

        > div:nth-child(4), > div:nth-child(6) {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}
.questionBank {
    margin-bottom: 30px;
    p:nth-child(n+2) {
        padding-left: 15px;
    }
}

</style>